<template>
    <div>
        <el-card class="box-card">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="0">当天</el-menu-item>
                <el-menu-item index="7">7天</el-menu-item>
                <el-menu-item index="30">30天</el-menu-item> </el-menu
            ><br />
            <el-card class="box-card2">
                <div class="text item">
                    <h1>{{ order_count }}</h1>
                    <br />
                    <span>总运单数</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>{{ order_count }}</h1>
                    <br />
                    <span>总设备数</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>{{ ontheway.length }}</h1>
                    <br />
                    <span>在途运单</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>{{ alarm_list.length }}</h1>
                    <br />
                    <span>报警运单</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
        </el-card>
        <div>
            <!--为echarts准备一个具备大小的容器dom-->
            <div id="main" style="width: 100%;height: 500px;"></div>
        </div>
    </div>
</template>

<script>
import { pandect } from '../../api/api';
// 引入折线图
import echarts from 'echarts';
export default {
    data() {
        return {
            // 选择天数
            activeIndex: '0',
            // 运单总列表
            order_list: [],
            // 总运单数
            order_count: '0',
            // 在途列表
            ontheway: [],
            // 报警列表
            alarm_list: [],
            charts: ''
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            this.activeIndex = key;
            var list1 = [];
            var list2 = [];
            pandect({ params: { activeindex: this.activeIndex } }).then(res => {
                this.order_list = res.data.data;
                this.order_count = this.order_list.length;
                for (let i of this.order_list) {
                    if (i.state == 0) {
                        list1.push(i);
                    }
                    if (i.state == 2) {
                        list2.push(i);
                    }
                }
                this.ontheway = list1;
                this.alarm_list = list2;
            });
        },
        // 折线图
        drawLine(time, data_s) {
            this.charts = echarts.init(document.getElementById('main'));
            this.charts.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['温度数据']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: [
                        '05/25/2020 10:45:55 AM',
                        '05/25/2020 10:53:25 AM',
                        '05/25/2020 11:00:55 AM',
                        '05/25/2020 11:08:25 AM',
                        '05/25/2020 11:15:55 AM',
                        '05/25/2020 11:23:25 AM',
                        '05/25/2020 11:30:55 AM'
                    ]
                },
                yAxis: {
                    type: 'value'
                },

                series: [
                    {
                        data: [25.5, 7.2, -7.2, 4.5, 23.3, 4.0, 8.4],
                        type: 'line'
                    }
                ]
            });
        }
    },

    mounted: function() {
        // 获取总览信息
        var list1 = [];
        var list2 = [];
        this.activeIndex = '0';
        pandect({ params: { activeindex: this.activeIndex } }).then(res => {
            this.order_list = res.data.data;
            this.order_count = this.order_list.length;
            for (let i of this.order_list) {
                if (i.state == 0) {
                    list1.push(i);
                }
                if (i.state == 2) {
                    list2.push(i);
                }
            }
            this.ontheway = list1;
            this.alarm_list = list2;
        });
        this.$nextTick(function() {
            this.drawLine('main');
        });
    }
};
</script>

<style>
.text {
    font-size: 14px;
    text-align: center;
    margin: auto;
}

.item {
    padding: 18px 0;
    width: 25%;
}

.box-card {
    width: 100%;
}
.box-card1 {
    width: 25%;
    height: 250px;
    float: left;
}
.box-card2 {
    width: 24%;
    height: 250px;
    float: left;
}
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
</style>